<template>

    <div class="person">
        <h2>姓名：{{ name }}</h2>
        <h2>年龄：{{ age }}</h2>
        <button @click="changeName">修改名字</button>
        <button @click="changeAge">修改年龄</button>
        <button @click="showTel">电话</button>

    </div>



</template>


<!-- 使用插件之后 组件名name可以写在下面 -->
<!-- 可以借助`vite`中的插件简化 -->
<!-- <script lang="ts">
export default {
    name: "Person"
}
</script> -->

<!-- setup语法糖 -->
<script setup lang="ts" name="Person">
import { ref } from 'vue';

// 数据，原来写在data中（注意：此时的name、age、tel数据都是响应式数据）
let name = ref("张三")
let age = ref(18)
let tel = ref('1387888888')

//方法
function showTel() {
    alert(tel)
}

//setup中访问this是undefined
function changeName() {
    name.value = "zhang3" 
    console.log(name)
}

function changeAge() {
    age.value += 1    
    console.log(age)
}

// 返回一个对象，对象中的内容，模板中可以直接使用
// return {name:name,age:age,tel:tel}
// return { name, age, showTel, changeName, changeAge }
</script>

<style scoped>
.person {
    background-color: aqua;
    box-shadow: 0 0 10px;
    border-radius: 10px;
    padding: 20px;
}

button {
    margin: 0 5px;
}
</style>